<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #change_capcha {
          vertical-align: middle;
          width: 30px;
          cursor: pointer;
        }
        
      </style>  
</head>

<body>
  <link rel="stylesheet" href="./homework2(1).css">
  <div class="card">
   <div> <form action="susu.html" method="get">
    <div  class="title">欢迎注册会员</div>
        <div><label for="telephone">手机号码:</label>
        <input type="text" id="telephone"name="telephone" maxlength="11" placeholder="11位手机号"/>
        <span style="color:red;">必填</span></div>
      <div>
        <label for="password">创建密码:</label>
        <input type="password" id="password" maxlength="8" placeholder="8位密码">
        <span style="color:red;">必填</span>
      </div>
        <div>
       <label for="youxiang">注册邮箱:</label>
        <input type="text" placeholder="列如：wustzz@aina.com">
        <span style="color:red;">必填</span>
        </div>
        <div>
        <label for="验证码"
        >&nbsp;验证码:</label>
        <input type="text" name="验证码" id="验证码"
      />
      <span id="capcha">4位验证码</span>
      <img src="images/arrow_03.png" id="change_capcha" />
        </div>
        <div>
        <label for="sex">&nbsp;&nbsp;性别:</label>
        <input type="radio" name="sex" value="boy">男
            <input type="radio" name="sex" value="girl">女
        </div>
        <div>
          <label for="">&nbsp;&nbsp;生日：</label><input type="date" name="mydate" id="birth"/>
        </div>
        
        <div>
          &nbsp;&nbsp;年龄:
        <input type="text" name="age">
        </div>
        <div>
          &nbsp;&nbsp;籍贯:
        <select name="sheng">
        <option  value="0">河北省</option>   
        <option  value="1">山西省</option>
        <option value="2">吉林省</option>
        <option value="3">辽宁省</option>
        <option value="4">黑龙江省</option>
        <option value="5">陕西省</option>
        <option value="6">甘肃省</option>
        <option value="7">青海省</option>
        <option value="8">山东省</option>
        <option value="9">福建省</option>
        <option value="10">浙江省</option>
        <option value="11">台湾省</option>
        <option value="12">河南省</option>
        <option value="13" selected="selected">湖北省</option>
        <option value="14">湖南省</option>
        <option value="15">江西省</option>
        <option value="16">江苏省</option>
        <option value="17">安徽省</option>
        <option value="18">广东省</option>
        <option value="19">海南省</option>
        <option value="20">四川省</option>
        <option value="21">贵州省</option>
        <option value="22">云南省</option>
        </select>
      
       <select  label= "湖北省" name="shi" id="0">
        <option value="0">武汉市</option> 
        <option value="1">随州市</option> 
        <option value="2">荆州市</option> 
        <option value="3">孝感市</option> 
        <option value="4">咸宁市</option> 
       </select>
       </div>
       <div>
       个人学历:
       <select name="edu" id="edu">
        <option value="0">小学</option>
        <option value="1">初中</option>
        <option value="2">高中</option>
        <option value="3" selected="selected">本科</option>
        <option value="4">研究生</option>
       </select>
       </div>
       <div>
        &nbsp;&nbsp;月薪:
        <input type="range" id="score" name="score" min="1500" max="5000" step="10" value="1500">
        <span id="msg"></span>
      </div>
    <script>
        var msg = document.getElementById("msg");
        window.onload = function () { 
        msg.innerHTML = document.getElementById("score").value;
        } 
        document.getElementById("score").onchange = function () { 
        msg.innerHTML = this.value; 
        }
    </script>
       
       <div>
       <label for="">个人爱好:</label>
      <input type="checkbox" name="like" value="sing">唱歌
      <input type="checkbox" nmae="like" value="run">跑步
      <input type="checkbox" name="like" value="swing">游泳
       </div>
       <div>
        个人照片:
        <input type="file" id="test-image-file" name="test" accept="image/*" />
      </p>
      <div class="kongbai"><p id="test-file-info"></p></div>
        <div
          id="test-image-preview"
          style="
            text-align:right;
            border: 1px solid silver;
            width: 200px;
            height: 200px;
            background-repeat: no-repeat;
            background-position: center;
            margin: 62px;
            margin-top: 0px;
            margin-bottom: 5px;
          " 
        ></div>
      <div class="person">
        <label for="oneself"
          >个人简介:</label>
          <input type="text" name="oneself" id="oneself"
        />
      </div>
      <div id="bottom">
       <input type="submit" value="提交">
       <input type="reset" value="重填">
       </div>
    </form>
    <script>
      var fileInput = document.getElementById("test-image-file");
      var info = document.getElementById("test-file-info");
      var preview = document.getElementById("test-image-preview");
      fileInput.addEventListener("change", function () {
        // 监听change事件
        preview.style.backgroundImage = ""; // 清除背景图片
        if (!fileInput.value) {
          info.innerHTML = "没有选择文件";
          return;
        }
        var file = fileInput.files[0]; // 获取File引用
        // 获取File信息:
        info.innerHTML =
          "文件: " +
          file.name +
          "<br>" +
          "大小: " +
          file.size +
          "<br>" +
          "修改: " +
          file.lastModifiedDate;
        if (
          file.type !== "image/jpeg" &&
          file.type !== "image/png" &&
          file.type !== "image/gif"
        ) {
          alert("不是有效的图片文件!");
          return;
        }
        var reader = new FileReader(); // 读取文件
        reader.onload = function (e) {
          // 发起一个异步操作来读取文件内容
          var data = e.target.result; // data串形如： '...(base64编码)...'
          preview.style.backgroundImage = "url(" + data + ")";
        };
        reader.readAsDataURL(file); // 以DataURL的形式读取文件
      });
    </script>
    <script>
      //验证码：由大小写字母或数字组成
      let codeStr =
        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
      //验证码长度
      let length = 4;
      let capcha = document.getElementById("capcha");
      let change_capcha = document.getElementById("change_capcha");
      // 用来生成一个[n,m]随机整数
      function getRandom(n, m) {
        return parseInt(Math.random() * (m - n + 1) + n);
      }
      // 将随机生成的整数下标对应的字母放入span中
      function getCode() {
        let str = "";
        // 验证码有几位就循环几次
        for (let i = 0; i < length; i++) {
          let index = getRandom(0, 61);
          str += codeStr.charAt(index);
        }
        capcha.innerHTML = str;
      }
      // 页面初始加载时就调用函数生成验证码，页面刷新也会执行
      getCode();
      // 点击刷新验证码
      capcha.addEventListener("click", getCode);
      change_capcha.addEventListener("click", getCode);
      var msg = document.getElementById("msg"); // 根据id值找到span元素
      window.onload = function () {
        msg.innerHTML = document.getElementById("money").value; // 获取区间域初始value值
      };
      document.getElementById("money").onchange = function () {
        msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
      };
      //照片预览
      var fileInput = document.getElementById("test-image-file");
      var info = document.getElementById("test-file-info");
      var preview = document.getElementById("test-image-preview");
      fileInput.addEventListener("change", function () {
        // 监听change事件
        preview.style.backgroundImage = ""; // 清除背景图片
        if (!fileInput.value) {
          info.innerHTML = "没有选择文件";
          return;
        }
        var file = fileInput.files[0]; // 获取File引用
        // 获取File信息:
        info.innerHTML =
          "文件: " +
          file.name +
          "<br>" +
          "大小: " +
          file.size +
          "<br>" +
          "修改: " +
          file.lastModifiedDate;
        if (
          file.type !== "image/jpeg" &&
          file.type !== "image/png" &&
          file.type !== "image/gif"
        ) {
          alert("不是有效的图片文件!");
          return;
        }
        var reader = new FileReader(); // 读取文件
        reader.onload = function (e) {
          // 发起一个异步操作来读取文件内容
          var data = e.target.result; // data串形如： '...(base64编码)...'
          preview.style.backgroundImage = "url(" + data + ")";
        };
        reader.readAsDataURL(file); // 以DataURL的形式读取文件
      });
    </script>
    </div>
</body>
</html>